{% extends "main.html" %}

{% block "main-content" %}

{% block "navigation" %}
	<a class="link-dark ps-2" style="text-decoration: none;" href="{% url "jobs:index" %}">
	Home 
	</a> 
		<svg class="m-1" xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="bi bi-chevron-right" viewBox="0 0 16 19">
		<path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
		</svg> 
	<a class="link-dark" style="text-decoration: none;" href="{% url "jobs:index" %}">
	Jobs
	</a> 
	<svg class="m-1" xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="bi bi-chevron-right" viewBox="0 0 16 19">
	<path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
	</svg> 
	<a href="#" style="text-decoration: none;">
	Matches
	</a>
{% endblock %}

<!-- Title -->
<h2 class="py-2 px-1 fw-bold">
	Results of "{{ job.comment }}"
</h2>

<div class="container-fluid shadow-sm bg-white p-4 rounded-3">

<!-- Search Bar -->
<input id="matches-search-bar" class="form-control rounded mb-3" type="search" placeholder="Search...">

<!-- Table -->
<table id="matches-table" class="table table-hover table-striped border rounded-3 sortable" style="background-color: white">

	<!-- Column headings -->
	<thead class="table-dark" style="cursor: pointer;">
		<tr>
			<th scope="col" style="width: 12.5%">Match ID</th>
			<th scope="col" style="width: 17.5%">Student 1</th>
			<th scope="col" style="width: 20%">% Matched</th>
			<th scope="col" style="width: 17.5%">Student 2</th>
			<th scope="col" style="width: 20%">% Matched</th>
			<th scope="col" style="width: 12.5%">Lines Matched</th>
		</tr>
	</thead>
	
	<!-- Matches -->
	<tbody>
		{% for match in matches %}
		<tr id="{{ match.match_id }}">
			<td><a style="text-decoration: none;" href="{% url "jobs:results:match" job.job_id match.match_id %}">{{ match.match_id|slice:"0:8" }}</a></td>

			<td>{{ match.first_submission.name }}</td>
			<td class="p-2">
				<div class="position-relative rounded d-flex align-items-center justify-space-between me-2" style="background-color: var(--bs-gray-300); transform: translateY(5px);">
					<div class="rounded" style="width:{{ match.first_percentage }}%; height: 15px; background-color: var(--bs-{% if match.first_percentage > 50 %}danger{% elif match.first_percentage > 40 %}warning{% elif match.first_percentage > 20 %}yellow{% else %}success{% endif %});"><br></div>
					<div class="position-absolute end-0 pe-2" style="font-size: 10px">{{ match.first_percentage }}%</div>
				</div>
			</td>
			
			<td>{{ match.second_submission.name }}</td>	
			<td class="p-2">
				<div class="position-relative rounded d-flex align-items-center justify-space-between me-2" style="background-color: var(--bs-gray-300); transform: translateY(5px);">
					<div class="rounded" style="width:{{ match.second_percentage }}%; height: 15px; background-color: var(--bs-{% if match.second_percentage > 50 %}danger{% elif match.second_percentage > 40 %}warning{% elif match.second_percentage > 20 %}yellow{% else %}success{% endif %});"><br></div>
					<div class="position-absolute end-0 pe-2" style="font-size: 10px">{{ match.second_percentage }}%</div>
				</div>
			</td>

			{% comment %} <td>{{ match.line_matches|length }}</td> {% endcomment %}
			<td>{{ match.lines_matched }}</td>
		</tr>
		{% endfor %}
	</tbody>

</table>

</div>

<script>
	let matchesTable = document.getElementById("matches-table");
	let matchesSearchBar = document.getElementById("matches-search-bar");
	setupTableSearch(matchesTable, matchesSearchBar);
</script>

{% endblock %}
